<template>
  <nav class="navbar">
    <ul class="navbar-items">
      <li class="navbar-item" v-for="(item, index) in items" :key="index">
        <a href="#" @click.prevent="handleItemClick(item)" class="navbar-link">{{ item.label }}</a>
        <ul v-if="item.children && isOpen === item.label" class="submenu">
          <li v-for="(child, childIndex) in item.children" :key="childIndex">
            <a href="#" class="submenu-link">{{ child }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      isOpen: null,
      items: [
        {
          label: '影片',
          children: ['电影', '综艺', '连续剧']
        },
        {
          label: '全部频道',
          children: ['创意', '励志', '搞笑', '运动', '旅行', '爱情', '广告', '动画', '剧情', '音乐', '科幻', '记录', '预告', '混剪', '实验', '生活', '时尚', '汽车', '游戏', '美食'],
        }
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      if (item.children) {
        this.isOpen = this.isOpen === item.label ? null : item.label;
      }
    }
  }
};
</script>

<style scoped>
* {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar {
  background-color: #4a90e2;
  color: #ffffff;
  padding: 10px 0;
}

.navbar-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.navbar-item {
  position: relative;
  margin-right: 20px;
  font-size: 18px;
}

.navbar-link,
.submenu-link {
  color: #10e2bf;
  text-decoration: none;
  padding: 5px 10px;
  display: inline-block;
  font-weight: bold;
}

.submenu {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 160px;
  z-index: 1;
  top: 100%;
  left: 0;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-item:hover .submenu {
  display: block;
}
</style>